<template>
  <div id="entry">
    <div  class="entryHeader">
      <div class="header">
        <span>
          <img
              src="../../assets/logo.png"
              width="340px;"
              style="margin-left:150px;margin-top:20px"
              height="78px;"
              alt
              srcset
          />
        </span>
        <span class="enter" style="font-size: smaller;float: right;margin: 50px 60px 0px 0px">
          <router-link to="/app" style="text-decoration:none;color: #fdfdfd">
            访客预约
          </router-link>
        </span>
        <span class="enter" style="font-size: smaller;float: right;margin: 50px 40px 0px 0px">
          <router-link to="/login" style="text-decoration:none;color: #fdfdfd">
            系统登录
          </router-link>
        </span>
        <!--        <div class="login-link" style="background-color: #ff4400;display: inline;width: 50px;height: 50px;z-index: 100px">-->
        <!--        </div>-->

      </div>
    </div>
    <div class="entryMain">
      <div>
        <keep-alive>
          <el-carousel indicator-position="outside" height="388px">
            <el-carousel-item v-for="item in img" :key="item.value">
              <img :src="item.src"/>
            </el-carousel-item>
          </el-carousel>
        </keep-alive>
        <div class="floor1 clearfix">
          <div class="left" style="float: left">
            <div class="fl-title">
              <i class="el-icon-location-outline"></i>
              <span class="titleName">地 图 定 位</span>
            </div>
            <div id="container" style="height:380px;width:530px;" ></div>
          </div>
          <div class="right" style="float: right">
            <div class="fl-title">
              <i class="el-icon-document"></i>
              <span class="titleName">校 园 公 告</span>
            </div>
            <div class="nas">
              <el-table
                  :data="notice"
                  stripe
                  style="width: 100%"
                  @row-click="rowClick">
                <el-table-column
                    prop="value"
                    width="440"
                    show-overflow-tooltip="show-overflow-tooltip">
                </el-table-column>
                <el-table-column
                    prop="date"
                    width="100">
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
      <!--      <el-button round>进 入 校 园</el-button>-->
    </div>
    <div class="entryFooter">
      <div class="adv">
        <span><a href="#">帮助</a></span>
        <span><a href="#">隐私</a></span>
        <span><a href="#">条款</a></span>
      </div>
      <div class="copyright">copyright@软工4班第四组</div>
    </div>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';

export default {
  data() {
    return {
      map:null,
      img: [
        {
          src: require("../../assets/b1.jpg")
        },
        {
          src: require("../../assets/b2.jpg")
        },
        {
          src: require("../../assets/b3.jpg")
        },
        {
          src: require("../../assets/b4.jpg")
        },
      ],
      notice: [
        {
          value: '中共中央政治局召开会议 习近平主持',
          date: '12-6',
          src:'http://news.sicnu.edu.cn/details/34_28298'
        },
        {
          value: '新华社客户端、人民网、省政府官网等多家媒体报道李向成书记讲授专题思政课',
          date: '12-6',
          src:'http://news.sicnu.edu.cn/details/34_28294'
        },
        {
          value: '唐文焱同志任四川师范大学党委常委',
          date: '12-6',
          src:'http://news.sicnu.edu.cn/details/34_28295'
        },
        {
          value: '校长汪明义与第十届学生会、第二届研究生会主席团、常代会会长团集体座谈',
          date: '12-4',
          src:'http://news.sicnu.edu.cn/details/34_28291'
        },
        {
          value: '四川师大党委书记李向成讲授专题思政课 宣讲党的十九届六中全会精神',
          date: '12-4',
          src:'http://news.sicnu.edu.cn/details/34_28287'
        },
        {
          value: '学校开展2021年“宪法宣传周”系列活动',
          date: '12-4',
          src:'http://news.sicnu.edu.cn/details/34_28286'
        },
        {
          value: '学校召开党史学习教育第七次工作推进会',
          date: '12-3',
          src:'http://news.sicnu.edu.cn/details/34_28283'
        },
        {
          value: '学校举行地震应急避险及疏散逃生演练',
          date: '12-2',
          src:'http://news.sicnu.edu.cn/details/34_28280'
        },
        {
          value: '学校优秀“支部工作法”名单揭晓',
          date: '12-2',
          src:'http://news.sicnu.edu.cn/details/34_28277'
        },
      ],
    }
  },
  mounted: function() {
    this.initMap();
  },
  methods: {
    initMap() {
      AMapLoader.load({
        "key": "883830cb0239b27e1766fc905ffd7ff9",   // 申请好的Web端开发者Key，首次调用 load 时必填
        "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        "plugins": []  //插件列表
      }).then((AMap) => {
        let amap = new AMap.Map('container', { // container为容器的id
          zoom: 15, //初始化地图层级
          center: [104.201578,30.565286] //初始化地图中心点
        });
        // 标记
        let marker = new AMap.Marker({
          position: [104.201578,30.565286] // 基点位置
        });
        // 地图添加标记
        amap.add(marker);
      }).catch(e => {
        console.log(e);
      })
    },
    rowClick(row){
      window.open(row.src,'_blank')
    }
  }
};
</script>

<style lang="less" scoped>

@deep: ~'>>>';

body {
  //background-color: #dbe5b8;
  background-image: url("../../assets/bg.png");
}

.header {
  height: 120px;
  background-color: #276e51;
}


img {
  border: 0 none;
  vertical-align: middle;
  max-width: 100%;
}


#container {
  border:5px solid #276e51;
}

.floor1{
  margin:40px 150px 0px 150px;
}

.left{
  width: 600px;
}

.left .fl-title{
  margin-bottom: 20px;
  width: 540px;
  border-bottom: 2px solid #cedfd7;
}


.right .fl-title{
  margin-bottom: 12px;
  width: 540px;
  border-bottom: 2px solid #cedfd7;
}


i {
  font-size:34px;
  margin-bottom: 8px;
  color: #333333;
}

.titleName {
  font-size: 28px;
  margin-left: 15px;
  color: #333333;
}

@{deep}.el-table th.el-table__cell{
  display: none;
}

@{deep}.el-table .el-table__cell{
  padding: 10px 0px;
  color:black;
}

.clearfix:after,.clearfix:before{
  content: "";
  display: table;
}
.clearfix:after{
  clear: both;
}
.clearfix{
  *zoom: 1;
}

.entryMain,.entryHeader{
  width: 100%;
}

.entryFooter {
  width: 100%;
  height: 100px;
  background-color: #276e51;
  margin-top: 60px;
  overflow: hidden;//消除塌陷
}

.copyright {
  text-align:center;
  margin-top: 10px;
  color: #fdfdfd;
  font-size: small;
}

.adv {
  width: 100%;
  margin-top: 22px;
  text-align:center;
}

.adv span:nth-child(1) {
  margin-left: 0px;
}

.adv span a{
  font-size: small;
  color: #fdfdfd;
  text-decoration: none;
}

</style>
